<template>
	<view class="content">
		<view class="part1">
			<text v-text="todayStr"></text>
		</view>
		<view class="part2">
			<u-subsection fontSize="30" :list="chartTitleList" mode="button" :current="chartIndex" @change="chartChange"></u-subsection>
			<view v-if="chartIndex == 0">
				<view class="big-font-view" v-if="sleep_day">
					昨日睡眠时间
					<text class="big-font" v-text="sleep_day"></text>小时
				</view>
				<view class="big-font-view" v-else>暂无数据</view>
				<view class="part2-chart">
					<qiun-data-charts type="ring" :opts="opts_day" :chartData="chartData_day" tooltipFormat="sleep_day" :animation="false" />
				</view>
			</view>
			<view v-else-if="chartIndex == 1">
				<view class="big-font-view" v-if="sleepMean_week">
					平均睡眠时间
					<text class="big-font" v-text="sleepMean_week"></text>小时
				</view>
				<view class="big-font-view" v-else>
					暂无数据
				</view>
				<view class="part2-chart">
					<qiun-data-charts type="column" :opts="opts_week" :chartData="chartData_week" tooltipFormat="sleep_week" :animation="false" />
				</view>
			</view>
			<view v-else-if="chartIndex == 2">
				<view class="big-font-view" v-if="sleepMean_month">
					平均睡眠时间
					<text class="big-font" v-text="sleepMean_month"></text>小时
				</view>
				<view class="big-font-view" v-else>
					暂无数据
				</view>
				<view class="part2-chart">
					<qiun-data-charts type="column" :opts="opts_month" :chartData="chartData_month" tooltipFormat="sleep_month" :animation="false" />
				</view>
			</view>
		</view>
		<view class="part3">
			<view>
				<u-icon v-if="chartIndex == 0" name="eye-fill" color="rgb(255, 102, 85)" size="80" label="今日概览"></u-icon>
				<u-icon v-if="chartIndex == 1" name="eye-fill" color="rgb(255, 102, 85)" size="80" label="本周概览"></u-icon>
				<u-icon v-if="chartIndex == 2" name="eye-fill" color="rgb(255, 102, 85)" size="80" label="本月概览"></u-icon>
			</view>
			<u-line margin="30rpx 0"></u-line>
			<view v-if="chartIndex == 0">
				<u-row>
					<u-col span="6">
						<view v-if="sleep_day">
							<text class="semi-big-font" v-text="sleep_day"></text>小时
						</view>
						<view v-else>暂无数据</view>
						<view>
							<text class="info-font">睡眠时间</text>
						</view>
					</u-col>
				</u-row>
			</view>
			<view v-if="chartIndex == 1">
				<u-row>
					<u-col span="6">
						<view v-if="sleepMean_week">
							<text class="semi-big-font" v-text="sleepMean_week"></text>小时
						</view>
						<view v-else>暂无数据</view>
						<view>
							<text class="info-font">平均睡眠时间</text>
						</view>
					</u-col>
				</u-row>
			</view>
			<view v-if="chartIndex == 2">
				<u-row>
					<u-col span="6">
						<view v-if="sleepMean_month">
							<text class="semi-big-font" v-text="sleepMean_month"></text>小时
						</view>
						<view v-else>暂无数据</view>
						<view>
							<text class="info-font">平均睡眠时间</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sleep_day: 0,
				sleepMean_week: 0,
				sleepMean_month: 0,
				todayStr: this.dateUtil.date2Str_Format1(new Date()),
				chartTitleList: ["日", "周", "月"],
				chartIndex: 0,
				opts_day: {
					color: ["#00AA00", "#00FF7F", "#FFFFFF"],
					padding: [15, 15, 15, 15],
					dataLabel: true,
					legend: {
						show: false
					},
					title: {
						name: "睡眠",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "0h",
						fontSize: 20,
						color: "#7cb5ec"
					},
					extra: {
						tooltip: {
							showBox: false
						}
					}
				},
				opts_week: {
					// fontSize: 20,
					dataLabel: false,
					padding: [15, 20, 0, 0],
					dataPointShape: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true
					},
					extra: {
						column: {
							type: "stack"
						}
					}
				},
				opts_month: {
					// fontSize: 20,
					dataLabel: false,
					padding: [15, 20, 0, 0],
					dataPointShape: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						labelCount: 4
					},
					extra: {
						column: {
							type: "stack",
							categoryGap:1
						}
					}
				},
				chartData_day: {},
				chartData_week: {},
				chartData_month: {}
			}
		},
		methods: {
			chartChange(index) {
				this.chartIndex = index
			},
		},
		mounted() {
			let token = uni.getStorageSync('token');
			if (!token) {
				return;
			}
			// 睡眠数据也比较特殊，日数据打算用环状图，周和月数据打算用叠加的柱状图
			//周和月的数据
			uni.$u.http.get(`${this.urlConfig.appServerPrefix}/sleep/sleeplisteveryday`, {
				header: {
					"token": token
				}
			}).then(res => {
				// 先转成map格式，方便查找对应的数据
				let date_sleepMap = {};
				let sleepList = [];
				if (res.data && res.data.extend.sleepDataList) {
					sleepList = res.data.extend.sleepDataList;
				}
				for (let i = 0; i < sleepList.length; i++) {
					date_sleepMap[sleepList[i].dayStr.slice(5)] = sleepList[i];
				}
				// 下面这一堆是为了生成x轴坐标
				// 先获得本周周一的date
				let t_today = new Date();
				let weekDate = this.dateUtil.getMonday(); //周一
				let monthDate = new Date(t_today.getFullYear(), t_today.getMonth(), 1);
				let weekStrArr = ["周一", "二", "三", "四", "五", "六", "周日"];
				let weekDeepDataArr = new Array(7);
				let weekLightDataArr = new Array(7);
				let monthStrArr = new Array(new Date(t_today.getFullYear(), t_today.getMonth() + 1, 0).getDate());
				let monthDeepDataArr = new Array(monthStrArr.length);
				let monthLightDataArr = new Array(monthStrArr.length);
				// 生成标准格式的本周数据
				let sleepSum_week = 0;
				let count_week = 0;
				for (var i = 0; i < weekStrArr.length; i++) {
					let weekDateStr = this.dateUtil.date2Str_Format3(weekDate)
					// weekStrArr[i] = weekDateStr;
					// t_data是当前日期的睡眠对象，下面是为了计算本周的平均睡眠时间
					let t_data = date_sleepMap[weekDateStr];
					weekDeepDataArr[i] = null;
					weekLightDataArr[i] = null;
					if (t_data) {
						sleepSum_week += t_data.deepSleep + t_data.lightSleep;
						weekDeepDataArr[i] = t_data.deepSleep;
						weekLightDataArr[i] = t_data.lightSleep;
						count_week++;
					}
					weekDate.setDate(weekDate.getDate() + 1);
				}
				this.sleepMean_week = Math.round(sleepSum_week / count_week);
				// 生成标准格式的本月数据
				let sleepSum_month = 0;
				let count_month = 0;
				for (var i = 0; i < monthStrArr.length; i++) {
					let monthDateStr = this.dateUtil.date2Str_Format3(monthDate)
					monthStrArr[i] = monthDateStr;
					let t_data = date_sleepMap[monthDateStr];
					monthDeepDataArr[i] = null;
					monthLightDataArr[i] = null;
					if (t_data) {
						sleepSum_month += t_data.deepSleep + t_data.lightSleep;
						monthDeepDataArr[i] = t_data.deepSleep;
						monthLightDataArr[i] = t_data.lightSleep;
						count_month++;
					}
					monthDate.setDate(monthDate.getDate() + 1);
				}
				this.sleepMean_month = Math.round(sleepSum_month / count_month);

				let deepSleep = 0;
				let lightSleep = 0;
				let todayString = this.dateUtil.date2Str_Format3(new Date());
				// 获得当日的数据对象
				let dataToday = date_sleepMap[todayString];
				if (dataToday) {
					deepSleep = dataToday.deepSleep * 1;
					lightSleep = dataToday.lightSleep * 1;
				}
				let awakeTime = 0;
				this.sleep_day = deepSleep + lightSleep;
				if (this.sleep_day < 6) {
					awakeTime = 6 - this.sleep_day;
				}
				this.opts_day.subtitle.name = this.sleep_day + "h";
				let chartDataTemp_day = {
					series: [{
						data: [{
							"name": "深睡眠",
							"value": deepSleep,
							"labelText": `深睡眠:${deepSleep}h`,
							"labelShow": !!deepSleep

						}, {
							"name": "浅睡眠",
							"value": lightSleep,
							"labelText": `浅睡眠:${lightSleep}h`,
							"labelShow": !!lightSleep
						}, {
							"name": "",
							"value": awakeTime,
							"labelShow": false
						}]
					}]
				}
				this.chartData_day = JSON.parse(JSON.stringify(chartDataTemp_day));

				let chartDataTemp_week = {
					categories: weekStrArr,
					series: [{
						name: "深睡眠",
						data: weekDeepDataArr,
						connectNulls: true
					}, {
						name: "浅睡眠",
						data: weekLightDataArr,
						connectNulls: true
					}]
				}
				this.chartData_week = JSON.parse(JSON.stringify(chartDataTemp_week));
				let chartDataTemp_month = {
					categories: monthStrArr,
					series: [{
						name: "深睡眠",
						data: monthDeepDataArr,
						connectNulls: true
					}, {
						name: "浅睡眠",
						data: monthLightDataArr,
						connectNulls: true
					}]
				}
				this.chartData_month = JSON.parse(JSON.stringify(chartDataTemp_month));
			}).catch(err => {
				console.log(err)
			})
		}
	}
</script>

<style lang="scss">
	.content {
		width: 710rpx;
		background-color: #FAFAFA;
		padding: 20rpx;
		height: calc(100vh - 40rpx);
	}

	.part1 {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.part3 {
		border-radius: 30rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		width: 650rpx;
		margin: 15rpx 0;
	}

	.big-font {
		margin-left: 50rpx;
		font-weight: 900;
	}

	.big-font-view {
		padding: 30rpx;
	}

	.part2-chart {
		width: 100%;
		height: 450rpx;
		padding: 20rpx 0;
	}

	.semi-big-font {
		font-size: 45rpx;
		font-weight: 600;
	}

	.info-font {
		font-size: 30rpx;
		color: #909399;
	}
</style>
